<template>
	<view>
		
		
		<view class="" v-if="list.length>0">
			<view class="bg d-flex" v-for="(item) in list" :key="item.id" @tap="detail(item.id)">
				<view class="list d-flex">
					<image class="list-image" :src="item.cover_ico" mode="widthFix" style="width: 120rpx;height: 223rpx;"></image>
				</view>
				<view class="list-text d-flex flex-column j-sa">
					<view class="">
						<view class="title">{{item.product_name}}</view>
						<view class="Subheading">{{item.product_introduct}}</view>
					</view>
					<view class="d-flex ">
						<view class="price">￥{{item.member_price}}</view>
					</view>
				</view>
			</view>
		</view>

		
		<view style="text-align: center;"  v-else>
			<view style="height: 300rpx;"></view>
			<image  src="@/static/img/user/kong.png" mode="widthFix" style="width: 200rpx;"></image>
			<view class="ls2 ml-2 mt-2">暂时没有相关的产品</view>
		</view>
		
		
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				kword: '',
				page: 1,
				list:[]
			};
		},
		computed: {
			...mapState(['hasLogin']),
		},
		onLoad(option) {
			if (!!option.kword) {
				this.kword = option.kword;
				this.title = "与'" + option.kword + "'相关的商品";
				this.getProductList();
			}
		},
		onPullDownRefresh() {
			this.getProductList()
		},
		
		methods: {
			async getProductList() {
				let res = await this.$myRequest({
					url: '/search_result',
					data: {
						page: this.page,
						keyword: this.kword
					}
				})
				if (res.data.data.totalCount>0) {
					uni.$emit('Kword',{keyword:this.kword})
					// this.saveKeyword(this.keyword); //保存为历史 
					this.list=res.data.data.list
					
				}
				uni.stopPullDownRefresh()
			},
			
			detail(id){
				uni.navigateTo({
					url:'/pages/detail/detail?id='+id
				})
			}

		},

	}
</script>

<style lang="scss">
	.bg {
		background-color: white;
		width: 100%;
		height: 100%;

		border-radius: 10rpx;
	}

	.list {
		margin: 0 0 0 30rpx;
		// width: 150rpx;
		// height: 150rpx;
		// border: 2rpx solid #bdbdbd;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
		border-radius: 20rpx;

		.list-image {
			margin: 20rpx 55rpx;
		}
	}

	.list-text {
		// font-size: 28rpx;
		margin: 10rpx 0 0 20rpx;
		letter-spacing: 2rpx;
		// width: 330rpx;
	}

	.Subheading,
		{
		color: #999;
		font-size: 20rpx;
		margin-top: 10rpx;
		margin-bottom: 5rpx;
	}

	.price {
		font-size: 32rpx;
		flex: 1;
		color: #29ad97;
		margin-top: -20rpx;
	}

	.title {
		white-space: nowrap; //单词在空格处：不换行
		overflow: hidden; //内容溢出的话：隐藏
		text-overflow: ellipsis; //溢出的文本用省略号代替
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	page {
		background-color: #f5f5f5;
	}
</style>
